<template>
  <el-dialog title="测试名称" :visible.sync="dialogVisible" center>
    <div class="profits-tabs">
      <div class="profits-tabs-header">
        <ul>
          <li>号码</li>
          <li>投注用户</li>
          <li>投注日期</li>
        </ul>
      </div>
      <div class="profits-tabs-cont">
        <ul v-if="profitsList&&profitsList.length>0">
          <li v-for="(item,index) in profitsList" :key="index">
            <span>{{item.date}}</span>
            <span>{{item.onebetAmount}}</span>
            <span>{{item.dividend}}{{item.coinType}}</span>
          </li>
        </ul>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import Api from '@/axios/api/api'

  export default {
    name: 'betting-detail',
    data() {
      return {
        dialogVisible: false,
        profitsList: [
          {
            'date': '2018-10-30',
            'onebetAmount': 100,
            'dividend': 0.1,
            'coinType': 'ETH'
          },
          {
            'date': '2018-10-30',
            'onebetAmount': 100,
            'dividend': 0.1,
            'coinType': 'ETH'
          },
          {
            'date': '2018-10-30',
            'onebetAmount': 100,
            'dividend': 0.1,
            'coinType': 'ETH'
          },
          {
            'date': '2018-10-30',
            'onebetAmount': 100,
            'dividend': 0.1,
            'coinType': 'ETH'
          },
          {
            'date': '2018-10-30',
            'onebetAmount': 100,
            'dividend': 0.1,
            'coinType': 'ETH'
          },
          {
            'date': '2018-10-30',
            'onebetAmount': 100,
            'dividend': 0.1,
            'coinType': 'ETH'
          },
          {
            'date': '2018-10-30',
            'onebetAmount': 100,
            'dividend': 0.01,
            'coinType': 'ETH'
          },
          {
            'date': '2018-10-30',
            'onebetAmount': 100,
            'dividend': 0.01,
            'coinType': 'ETH'
          },
          {
            'date': '2018-10-30',
            'onebetAmount': 100,
            'dividend': 0.1,
            'coinType': 'ETH'
          },
          {
            'date': '2018-10-30',
            'onebetAmount': 200,
            'dividend': 0.2,
            'coinType': 'ETH'
          }
        ]
      }
    },
    props: ['visible'],
    watch: {
      visible: 'checkVisible'
    },
    methods: {
      checkVisible() {
        this.dialogVisible = true
        this.getListdata()
      },
      getListdata() {
        Api.getRacelist().then(res => {
          let result = res.data
          if (result.code === 0) {
            this.listData = result.data
          } else {
            this.$message.error(result.message)
          }
        })
      }
    },
    mounted() {
      this.dialogVisible = this.visible
    }
  }
</script>

<style lang="less" scoped>
  .profits-tabs {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    .profits-tabs-header {
      width: 100%;
      height: 56px;
      display: block;
      overflow: hidden;
      padding: 0 38px;
      box-sizing: border-box;
      background: #8638FD;
      color: #ffffff;
      > ul {
        width: 100%;
        height: 56px;
        display: block;
        overflow: hidden;
        > li {
          width: 33.33%;
          height: 56px;
          line-height: 56px;
          float: left;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #ffffff;
          text-align: center;
        }
      }
    }
    .profits-tabs-cont {
      width: 100%;
      height: auto;
      display: block;
      overflow: hidden;
      padding-bottom: 20px;
      > ul {
        width: 100%;
        height: auto;
        display: block;
        overflow: hidden;
        padding: 0 38px;
        box-sizing: border-box;
        > li {
          width: 100%;
          height: 64px;
          line-height: 64px;
          display: block;
          overflow: hidden;
          border-bottom: 1px solid #D8D8D8;
          > span {
            width: 33.33%;
            height: 64px;
            line-height: 64px;
            float: left;
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #000000;
            text-align: center;
          }
        }
      }
    }
  }
</style>
